<script setup>
import Logo from '@/components/Logo.vue'
import Lang from '@/components/Lang.vue';
import { getReportListApi } from '@/apis/user'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useLangStore } from '@/stores/lang'
import { useUserStore } from '@/stores/user'
import { showToast } from 'vant';

const router = useRouter()
const langStore = useLangStore()
const userStore = useUserStore()

let reportList = ref([])
let companyName = ref('')

const getReportList = async () => {
  const res = await getReportListApi()
  if (res.data.code !== 200) { return showToast(res.data.msg) }
  companyName.value = res.data.data.customername
  reportList.value = res.data.data.overviews
  // 水印
  userStore.getCompanyName()
  userStore.setWaterMark('',true)
}
getReportList()

const exitshow = ref(false)
const exitUser = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('token_time')
  let lang = langStore.getLang
  showToast('账号已退出，请重新登录！')
  // 跳转
  lang === 'en' ? router.replace('/en') : router.replace('/cn')
  // 清除水印
  userStore.setWaterMark(' ', false)
}
</script>

<template>
  <div class="listbox box">
    <Logo />
    <div class="list_container">
      <Lang />
      <img src="@/assets/img/icon_exit.png" class="icon_exit" @click="exitshow = true" />
      <div class="list clmstart">
        <div class="litem clmcenter" v-for="item, index in reportList" :key="item.id"
          @click="$router.replace({ path: '/cn/report_index', query: { id: item.id } })">
          <p class="title">报告{{ index + 1 }}</p>
          <div class="item_cont">审线时间：{{ item.createdon }}</div>
          <div class="item_cont">审线人：{{ item.new_la_creator }}</div>
          <div class="item_cont">生产线别：1#{{ item.new_customerline }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="exitbox clmcenter" v-show="exitshow">
    <div class="exitcontainer clmcenter">
      <p>是否退出当前账号？</p>
      <button type="button" @click="exitUser">确认</button>
      <button type="button" @click="exitshow = false">取消</button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.exitbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-color: rgba($color: #000000, $alpha: 0.8);
  .exitcontainer {
    width: 638px;
    height: 565px;
    border-radius: 20px;
    background-color: #ffffff;
    font-size: 32px;
    p {
      color: #000000;
      padding-bottom: 105px;
    }
    button {
      border-style: none;
      outline: none;
      width: 529px;
      height: 67px;
      background: #004d91;
      border-radius: 30px;
      color: #ffffff;
      margin-bottom: 40px;
    }
    button:last-child {
      margin-bottom: 0;
    }
  }
}
.listbox {
  overflow-y: scroll;
  .list_container {
    position: relative;
    min-height: calc(100% - 166px);
    background: url('@/assets/img/listbg.jpg') no-repeat;
    background-size: cover;
    .icon_exit {
      position: absolute;
      top: 26px;
      right: 56px;
      width: 49px;
      z-index: 10;
    }
    .list {
      height: auto;
      padding: 35px 0;
      .litem {
        width: 638px;
        padding: 45px 0;
        margin-bottom: 42px;
        border-radius: 50px;
        // background-image: linear-gradient(
        //   35deg,
        //   #5d90e3 0%,
        //   #5468f6 11%,
        //   #5468f6 21%,
        //   #4686f7 39%,
        //   #36b6ea 64%,
        //   #46e3b2 100%
        // );
        // opacity: 0.8;
        background: url('@/assets/img/litembg.png') no-repeat;
        background-size: 100% 100%;
        text-align: left;
        .title {
          width: 527px;
          font-family: 'DOUYUfont';
          font-size: 3rem;
          color: #ffffff;
          padding-bottom: 10px;
        }
        .item_cont {
          width: 527px;
          min-height: 61px;
          margin-top: 15px;
          padding-left: 20px;
          font-size: 1.64rem;
          line-height: 61px;
          background: #f9f9f9;
          background-clip: padding-box;
          box-shadow: 0 1px 2px #b1baca inset;
          border: 2px solid transparent;
          border-radius: 15px;
          background-clip: padding-box, border-box;
          background-origin: padding-box, border-box;
          background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to bottom, #B1B6C9, #ffffff);
        }
      }
      .litem:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
